<template>
  <div class="app-container">
    <FormCom class="form-search" ref="search" :columns="queryColumns" labelWidth="3em" v-show="showSearch"/>
    <div class="flr mb8">
      <div class="flbox">
        <el-button type="primary" plain @click="handleAdd">新增</el-button>
        <el-button type="warning" plain @click="handleExport">导出</el-button>
      </div>
      <div class="flone">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </div>
    </div>
    <TableCom :columns="tableColumns" :options="tableOptions" @getList="getList"></TableCom>
  </div>
</template>

<script>
  import indexVue from '@/config/indexVue';

  const editColumns = [
    {text: "新闻标题", name: "title", type: "input"},
    {text: "页面编码", name: "link", type: "input",size:12},
    {text: "排序", name: "sort", type: "input",size:12,value:'1'},
    {text: "是否发布", name: "able", type: "select",size:12,value:"0",options:"_able"},
    {text: "首页图片", name: "pic", type: "uploadImg",value:"",accept:"image/*",limit:1},
  ]
  const editRule = {
    title: ["required"] ,
    deployTime: ["required"] ,
    link: ["required"],
    pic: ["required"]
  }

  export default {
    name: "News",
    mixins:[indexVue],
    data() {
      this.actionName = "news";
      this.editColumns = editColumns;
      this.editRule = editRule;
      this.queryColumns = [
        { text:"标题",name:"title",type:"input",onKeyup:this.handleQuery},
        { type:"label",searchButton:{listQuery:this.handleQuery, listReset:this.resetQuery}}
      ]
      this.tableColumns = [
        { type:"index",fixed:true },
        {"prop":"title","label":"标题","minWidth":180},
        {"prop":"able","label":"是否发布","width":160,options:"_able",template:"ColumnDict"},
        {"prop":"sort","label":"排序","width":160},
        {"prop":"createTime","label":"创建时间","width":160},
        { label:"操作",prop:"_",width:"120",align:"center",fixed:"right",className:"",options:[
            {
              text:"修改",
              props:{class:'primary'},
              onClick:this.handleUpdate
            },
            {
              text:"删除",
              props:{class:'danger'},
              onClick:this.handleDelete
            },
          ]
        }
      ]
      //
      return {
        tableOptions:{
          pageNum: 1,
          pageSize: 10,
          orderByColumn:"sort",
          isAsc: "desc",
          total:0,
          loading:false,
          data:[]
        },
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      /** 新增按钮操作 */
      handleAdd() {
        let pm = this.$refs.search.getData();
        this.dialogEdit({
          row:{cate:pm.cate},
          PATH_SAVE:`news.add`,
          width:"540px",
          size:24,
          labelWidth:"6em",
          columns:this.editColumns,
          rules:this.editRule
        },()=>{
          this.getList();
        })
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.dialogEdit({
          row,
          PATH_SAVE:`news.edit`,
          width:"540px",
          size:24,
          labelWidth:"6em",
          columns:this.editColumns,
          rules:this.editRule
        },()=>{
          this.getList();
        })
      },
    }
  };
</script>
